<template>
	<!-- <view class="content">
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">

		<hx-navbar title="确认订单" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="container">
			<view class="collection_info">
				<image :src="orderInfo.item.image" mode="aspectFit" class="collect_image"></image>
				<view class="title">{{orderInfo.item.name}}
					<view v-if="orderInfo.nft">
						#{{orderInfo.nft.tokenId}}
					</view>
				</view>
			</view>
			<view class="order_info_box">
				<block>
					<view class="order_info_item">
						订单编号
						<view class="color-3">
							{{ orderId || '' }}
						</view>
					</view>
					<view class="order_info_item">
						订单金额
						<view class="">
							￥{{ orderInfo.amount|fp}}
						</view>
					</view>
					<view class="order_info_item">
						创建时间
						<view class="">
							{{ orderInfo.createTime | filterTime}}
						</view>
					</view>
				</block>
				<!-- <view v-else>
					<view class="order_info_item">
						订单金额
						<view class="">
							￥ {{ recharge || '' }}
						</view>
					</view>
				</view> -->
			</view>
			<!-- <view class="choose_title">
				选择支付方式
			</view> -->
			<view class="pay_type_list">
				<!-- #ifdef H5 -->
				<payments-by-h5 :orderId="orderId" :recharge="recharge" :type="type" :pay_type='pay_type' ref="h5"
					:uid="userInfo.id" @change_type="changeType">
				</payments-by-h5>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
				<payments-by-app :orderId="orderId" :recharge="recharge" :type="type" :pay_type='pay_type'
					:uid="userInfo.id" ref="app" @change_type="changeType">
				</payments-by-app>
				<!-- #endif -->
			</view>
      <view class="pay_type_list" :style="[selStyle]">
        <radio-group name="pay_type">
          <block>
            <view class="pay_item" v-if="pay_way==2">
              <image :src="payments[0].icon" mode="aspectFill" class="pay_icon"></image>
              <view class="" style="flex: 1;">
                <view class="">
                  {{ payments[0].name}}
                </view>
              </view>
              <radio :value="payments[0].code" active-color="yellow"
                     checked />
            </view>
            <view class="pay_item" v-if="pay_way==7">
              <image :src="payments[1].icon" mode="aspectFill" class="pay_icon"></image>
              <view class="" style="flex: 1;">
                <view class="">
                  {{ payments[1].name}}
                </view>
              </view>
              <radio :value="payments[1].code" active-color="yellow"
                     checked />
            </view>


            <view class="pay_item" v-if="pay_way==5">
              <image :src="payments[2].icon" mode="aspectFill" class="pay_icon"></image>
              <view class="" style="flex: 1;">
                <view class="">
                  {{ payments[2].name}}
                </view>
              </view>
              <radio :value="payments[2].code" active-color="yellow"
                     checked />
            </view>


          </block>
        </radio-group>

      </view>

		</view>
		<uni-popup ref="bindingDialog" type="center" :maskBackgroundColor="'rgba(0,0,0,0.5)'" :isMaskClick="false">
			<view class="store-view store-border-all tips-padding"
				:style="{'background':kbackgroundColor,color:knormalColor}"
				:class="[{'alert-border-black alert-border-shadow-black':ktheme =='black'},{'alert-border-purple':ktheme =='purple'}]">
				<text class="popup-title"></text>
				<text class="popup-subtitle">{{tiMesee}}</text>
				<view class="tips-bottom">
					<view class="tips-button"
						:class="[{'tips-cancel-bg-black':ktheme =='black'},{'tips-cancel-bg-white':ktheme =='purple'}]"
						@click="bindingClose()">关闭</view>
					<view class="tips-button" :style="{background:kbuttonBgColor}" @click="bindingCheck()">去充值
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="" style="height: 200rpx;">

		</view>
		<view class="footWrap" :style="{'background-color':ktabbarBgColor}">
			<view class="btn" @tap="submit()" :style="{background:buttonBcak}" v-if="orderInfo.status == 0">立即购买</view>
			<view class="btn" :style="{background:buttonBcak}" v-if="orderInfo.status == 1">已支付</view>
			<view class="btn" :style="{background:buttonBcak}" v-if="orderInfo.status == 2">已取消</view>
		</view>
		<!-- <paypass ref="passbox" @confirm="set_done"></paypass> -->
	</view>
</template>

<script>
	export default {
		// mixins: [orders],
		filters: {
			filterTime(val) {
				return uni.$u.timeFormat(parseInt(val), 'yyyy-mm-dd hh:MM:ss')
			}
		},
		data() {
			return {
				tiMesee: "",
				buttonBcak: this.$store.state.buttonBcak, //按钮颜色
        pay_way: null,
        payments: [{
          id: 1,
          icon: '../../static/image/payto.png',
          name: '汇付天下',
          code: 'huifupay'
        },
          {
            id: 2,
            icon: '../../static/image/zwlogo.png',
            name: '系统钱包',
            code: 'balancepay'
          },
          {
            id: 3,
            icon: '../../static/image/sandLogo.png',
            name: '杉德支付',
            code: 'sdpay'
          },
        ],

					buttonBcak: this.$store.state.buttonBcak, //按钮颜色
				orderId: 0,
				recharge: 0,
				type: 1, // 订单类型 1商品订单 2充值订单
				orderInfo: {
					item: {
						image: '',
						name: ''
					},
					nft: {
						id: ''
					}
				}, // 订单详情
				userInfo: {}, // 用户信息
				form_id: 0,

				pay_type: '',
				goods_code: '',
				submiting: false,
				payVal: ""
			};
		},
		components: {
			// paypass,
			// // #ifdef H5
			// paymentsByH5,
			// // #endif
			// // #ifdef MP-WEIXIN
			// paymentsByWx,
			// // #endif
			// // #ifdef MP-ALIPAY
			// paymentsByAli,
			// // #endif
			// // #ifdef APP-PLUS || APP-PLUS-NVUE
			// paymentsByApp,
			// // #endif
			// // #ifdef MP-TOUTIAO
			// paymentsByTt
			// // #endif
		},
		onLoad(options) {
			this.orderId = options.order_id;
			this.pay_way = options.payWay
			this.getOrderInfo();
			//余额显示
			this.$api.pursedetailId(res => {
				if (res.status) {
					this.payVal = res.data.balance
				}

			})
		},
		onShow() {
			this.submiting = false;
		},
		methods: {
			bindingClose() {
				this.$refs.bindingDialog.close()
			},
			bindingCheck() {
				this.$refs.bindingDialog.close()
				uni.navigateTo({
					url: '/pages/user/wallet_system/wallet_system'
				})
			},
			fp(value) {
				if (!value) {
					return '0.00';
				}
				return Number(value / 100).toFixed(2)
			},
			submit: function() {
				if (!this.submiting) {
					this.submiting = true;
					setTimeout(() => {
						this.submiting = false
					}, 5000);

					if (Number(this.pay_way) == 7) {
						if (parseInt(this.payVal)<parseInt(this.fp(this.orderInfo.amount))) {
							this.tiMesee = '系统钱包余额不足'
							this.$refs.bindingDialog.open()
						} else {
							this.$api.purseChangeDetailList(1, val => {})
							uni.redirectTo({
								url: '/pages/payment/systemCashier?nftType=1' + '&nftIdList=' + this
									.nftIdList + "&payNum=" + this.orderInfo.amount + "&orderId=" + this
									.orderId + '&iftype=2'
							})
						}
						return false
					} else {
						let body = {
							orderId: this.orderId,
							type: 1,
							payWay: Number(this.pay_way)
						}
						if (this.orderInfo.amount == 0) {
							this.$api.walletPayOrder(body).then(res => {
								uni.navigateTo({
									url: '/pages/collection/collection'
								})
							})
							return;
						}
						this.$api.payHfOrder(body, res => {
							if (res.status) {
								let url = res.data;
								// #ifdef H5
								window.location.href = url;
								// #endif
								// #ifdef APP-PLUS
                uni.setStorageSync('sdUrl', url);
                uni.navigateTo({
                  url: `/pages/user/webview/sdWebview`
                })
								// #endif
							} else {
								this.$common.errorToShow(res.message)
							}
						})
					}

				} else {
					this.$common.errorToShow('操作太快了稍后再试')
				}
			},

			changeType: function(type) {
				this.pay_type = type
			},
			uploadimg: function(img) {
				console.log(img)
				this.pay_img = img
			},

			// 获取订单详情
			getOrderInfo() {
				let data = {
					ids: this.orderId,
					payment_type: this.type
				};
				this.$api.orderDetail(this.orderId, res => {
					if (res.status) {
						this.orderInfo = res.data
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.userInfo = res.data;
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			// 跳转我的余额页面
			toRecharge() {
				this.$common.navigateTo('/pages/member/balance/index');
			}
		}
	};
</script>

<style lang="scss" scoped>
.pay_icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 30rpx;

}
.pay_item {
  width: 100%;
  padding: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #d4d4d4;

  /* background-color: #fff; */
  /* box-shadow: 0rpx -5rpx 10rpx 1rpx rgba(0, 0, 0, 0.16); */
  height: 100rpx;
  /* margin-bottom: 30rpx; */
  box-sizing: border-box;
  // border-radius: 20rpx;
}
	.container {
		width: 100%;
		padding: 0 40rpx;
		margin-top: 40rpx;
	}

	.collection_info {
		width: 100%;
		background-color: rgba(255, 255, 255, .9);
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.collect_image {
			width: 180rpx;
			height: 180rpx;
			margin-right: 22rpx;
		}

		.title {
			font-size: 28rpx;
			color: #000;
			font-weight: 400;
		}

		// 	.collect_info {
		// 		flex: 1;
		// 		padding-top: 25rpx;


		// 		.collect_title {
		// 			font-size: 32rpx;
		// 			font-weight: bold;
		// 			color: #000000;
		// 			padding-bottom: 10rpx;
		// 			line-height: 45rpx;
		// 			border-bottom: 1rpx solid #D9D9D9;
		// 		}

		// 		.collect_item {
		// 			padding-top: 10rpx;
		// 			display: flex;
		// 			align-items: center;

		// 			.keys {
		// 				width: 162rpx;
		// 				font-size: 24rpx;
		// 				font-weight: 400;
		// 				color: #ABA9B4;
		// 			}

		// 			.value {
		// 				font-size: 24rpx;
		// 				font-weight: bold;
		// 				color: #141519;
		// 			}
		// 		}
		// 	}

	}

	.pay_type_list {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #fff;
	}

	// .choose_title {
	// 	height: 100rpx;
	// 	width: 100%;
	// 	display: flex;
	// 	align-items: center;
	// 	font-size: 28rpx;
	// 	font-weight: bold;
	// 	color: #fff;
	// }
	.order_info_item {
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #666;
		font-weight: 400;
	}

	.order_info_box {
		width: 100%;
		background-color: $bg-box;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	/deep/ uni-radio .uni-radio-input {
		width: 24rpx;
		height: 24rpx;
		border-color: #E98589 !important;
	}

	/deep/ uni-radio:not([disabled]) .uni-radio-input:hover {
		border-color: #E98589 !important;
	}

	/deep/ .uni-radio-input.uni-radio-input-checked {
		border-color: #E98589 !important;
		background-color: #E98589 !important;
	}

	/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
		font-size: 12rpx;
	}
</style>
